<template>
  <div class="inbox-container">
    <!-- 导航栏 -->
    <van-nav-bar title="我的站内信" left-text="返回" left-arrow @click-left="onClickLeft" />

    <!-- 未读消息数量提示 -->
    <div v-if="unreadMessagesCount > 0" class="unread-notification">
      您有 {{ unreadMessagesCount }} 封未读消息。
    </div>

    <!-- 站内信列表 -->
    <div v-if="messages.length > 0" class="message-list">
      <ul>
        <li v-for="(message, index) in messages" :key="index" @click="viewMessage(message)" :class="{ 'read': message.read, 'unread': !message.read }">
          <span>{{ message.title }}</span>
          <small>{{ formatDate(message.sendTime) }}</small>
        </li>
      </ul>
    </div>

    <!-- 如果没有站内信 -->
    <div v-else class="no-messages">
      <p>您还没有任何站内信。</p>
    </div>

    <!-- 查看站内信详情（模态框） -->
    <transition name="modal">
      <div v-if="selectedMessage" class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <header class="modal-header">
              <h3>{{ selectedMessage.subject }}</h3>
              <button @click="closeModal">关闭</button>
            </header>
            <section class="modal-body">
              <p>{{ selectedMessage.content }}</p>
              <small>发送时间: {{ formatDate(selectedMessage.sendTime) }}</small>
            </section>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { GetIntraSiteList } from "@/api/intraSite"; // 假设有一个获取站内信的API

const router = useRouter();

// 点击返回按钮
const onClickLeft = () => {
  router.back(); // 返回上一页
};

// 获取站内信数据
const messages = ref([]);

const loadMessages = async () => {
  try {
    const response = await GetIntraSiteList();
    if (response.data.code === 200000) {
      console.log('获取站内信成功:', response.data);
      messages.value = response.data.data;
    } else {
      console.error('获取站内信失败:', response.data.message);
    }
  } catch (error) {
    console.error("获取站内信出错:", error);
  }
};

// 计算未读消息的数量
const unreadMessagesCount = computed(() => {
  return messages.value.filter(message => !message.read).length;
});

// 格式化日期
const formatDate = (dateString) => {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return new Date(dateString).toLocaleDateString(undefined, options);
};

// 查看单封信件详情
const selectedMessage = ref(null);

const viewMessage = (message) => {
  console.log('查看消息详情:', message)
  if (!message.read) {
    message.read = true; // 标记为已读
  }
  selectedMessage.value = message;
};

// 关闭模态框
const closeModal = () => {
  selectedMessage.value = null;
};

onMounted(() => {
  loadMessages();
});
</script>

<style scoped>
.inbox-container {
  padding: 16px;
}

/* 新增：未读消息通知样式 */
.unread-notification {
  background-color: #ffeb3b;
  color: #000;
  padding: 8px;
  margin-bottom: 8px;
  text-align: center;
}

.message-list ul {
  list-style-type: none;
  padding: 0;
}

.message-list li {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.message-list li.read {
  background-color: #f9f9f9;
}

.message-list li.unread {
  font-weight: bold;
  background-color: #e0f7fa;
}

.no-messages {
  text-align: center;
  margin-top: 24px;
}

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 80%;
  max-width: 500px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-header button {
  float: right;
  padding: 5px;
  background: none;
  border: none;
  color: #42b983;
  cursor: pointer;
}

.modal-body {
  margin: 20px 0;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-active,
.modal-leave-active {
  transition: opacity .5s ease;
}
</style>